{% extends 'admin/base.html' %}

{% block content %}
    <div class="w-full px-6 py-8">
        <div class="mb-6 flex justify-between items-center">
            <h1 class="text-2xl font-semibold">标签管理</h1>
            <div class="flex items-center space-x-4">
                <button onclick="showModal('add')"
                        class="px-4 py-2 bg-primary text-white hover:bg-primary/90 !rounded-button whitespace-nowrap">
                    <i class="fas fa-plus mr-2"></i>添加标签
                </button>
            </div>
        </div>

        <div class="bg-white !rounded-lg shadow">
            <table class="w-full">
                <thead>
                <tr class="text-left border-b border-gray-200">
                    <th class="px-6 py-4 text-sm font-medium text-gray-500 text-center">标签ID</th>
                    <th class="px-6 py-4 text-sm font-medium text-gray-500 text-center">标签名</th>
                    <th class="px-6 py-4 text-sm font-medium text-gray-500 text-center">操作</th>
                </tr>
                </thead>
                <tbody>
                {% for tag_data in pagination.current_items %}
                    <tr class="border-b border-gray-200">
                        <td class="px-6 py-4 text-center" style="color: #4e7fc7">{{ tag_data.id }}</td>
                        <td class="px-6 py-4 text-center">{{ tag_data.name }}</td>
                        <td class="px-6 py-4 text-center">
                            <button onclick="showModal('edit', '{{ tag_data.name }}')"
                                    class="p-2 text-primary hover:bg-primary/10 !rounded-button">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="delete_tag('{{ tag_data.id }}')"
                                    class="p-2 text-red-500 hover:bg-red-50 !rounded-button">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% with endpoint='admin.manage_tags', url_params={} %}
                {% include 'admin/components/page.html' with context %}
            {% endwith %}
        </div>
    </div>

    <div id="tagModal" class="user-modal">
        <div class="user-modal-content">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold" id="modalTitle">添加标签</h3>
                <button onclick="hideModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="userForm">
                <input type="hidden" id="editTagName">
                <div class="space-y-4">
                    <div>
                        <label for="tagName" class="block text-sm font-medium text-gray-700 mb-1">标签名</label>
                        <input id="tagName" name="tagName" type="text"
                               class="w-full px-3 py-2 border border-gray-300 !rounded-button focus:outline-none focus:border-primary"
                               required>
                    </div>
                </div>
                <div class="flex justify-end space-x-4 mt-6">
                    <button type="button" onclick="hideModal()"
                            class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 !rounded-button whitespace-nowrap">
                        取消
                    </button>
                    <button type="button" onclick="submitUser()"
                            class="px-4 py-2 text-white bg-primary hover:bg-primary/90 !rounded-button whitespace-nowrap">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        const page_num = document.getElementById('page_num').innerText;
        sessionStorage.setItem('tagPage', page_num);

        function showModal(type, tagName) {
            if (type === 'edit') {
                document.getElementById('editTagName').value = tagName;
                document.getElementById('tagName').value = tagName;
            }
            const modal = document.getElementById('tagModal');
            const modalTitle = document.getElementById('modalTitle');
            modal.style.display = 'block';
            modalTitle.textContent = type === 'add' ? '添加标签' : '编辑标签';
        }

        function hideModal() {
            const user_form = document.getElementById('userForm');
            user_form.onreset;
            const modal = document.getElementById('tagModal');
            modal.style.display = 'none';
        }

        function submitUser() {
            const modalTitle = document.getElementById('modalTitle');
            const tagName = document.getElementById("tagName").value;

            if (modalTitle.textContent === "添加标签") {
                fetch('/admin/add_tag', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        tagName: tagName
                    })
                }).then(() => {
                    hideModal();
                    setTimeout(() => {
                        window.location.href = `/admin/manage_tags/${page_num}`;
                    }, 600)
                });
            } else if (modalTitle.textContent === "编辑标签") {
                const tagName = document.getElementById("tagName").value;
                const editTagName =  document.getElementById('editTagName').value;
                fetch('/admin/edit_tag', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        tagName: tagName,
                        editTagName: editTagName
                    })
                }).then(() => {
                     window.location.href = `/admin/manage_tags/${page_num}`;
                });
            }
        }

        function delete_tag(tagId) {
            // 显示确认弹窗
            showConfirm('是否确认删除?').then(confirmed => {
                if (confirmed) {
                    // 用户点击确认后执行删除操作
                    fetch(`/admin/delete_tag/${tagId}`).then(() => {
                        window.location.href = `/admin/manage_tags/${page_num}`;
                    });
                }
            });
        }
    </script>
{% endblock %}